http://stackoverflow.com/questions/9437584/what-does-webkit-min-device-pixel-ratio-2-stand-for http://stackoverflow.com/questions/16030041/media-query-pixel-density-and-max-width-together http://stackoverflow.com/questions/15975432/webkit-min- ...

学习media query可以参考官方网址： https://www.w3.org/TR/css3-mediaqueries/ 今天运到一个问题，在使用chrome调试media query效果时，使用调试窗口来调整页面大小，效果如期望的展现。但是如果直接调整浏览器大小，部分大小时候做到了自适应，但是当窗口resize到一定大小后，并没有发生变化。不知道是不是浏览器的bug. 代码如下： @media screen and (max-width: 450px) ...

设计responsive页面时的注意点： 使用media query增加breakpoint来实现responsive. 永远以mobile设计优先。 设计组件时经常长宽使用百分比。 如果需要设置一些长宽固定数值时，使用em作为单位是个不错的选择。然后针对字体大小设置对应的em大小。以字体作为参照物。 参考文档： https://developer.mozilla.org/zh-CN/docs/Web/Guide/CSS/Media_queries ...